<html>
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style>
        body{
            margin: 0;
            background-color: #111;
        }
        #point{
            height: 30px;
            width: 30px;
            background-color: white;
            border-radius: 15px;
            position: absolute;
            /*当页面大小发生变化时，用百分比自动获取高度*/
            top: calc(50% - 30px / 2);
            left: calc(50% - 30px / 2);
            z-index: 10;
        }
        #second{
            width: 600px;
            height: 10px;
            /*background-color: aqua;*/
            position: absolute;
            top: calc(50% - 10px / 2);
            left: calc(50% - 600px / 2);
            animation: second 60s linear infinite;
        }
        @keyframes second{
            0%{transform: rotate(0);}
            100%{transform: rotate(360deg);}
        }
        #second span{
            /*把行内元素转化成块级元素*/
            display: block;
            width: 350px;
            height: 3px;
            background-color: blue;
            position: relative;
            top: 3.5px;
            border-radius: 1.5px;
            z-index: 9;
        }
        #minute{
            width: 500px;
            height: 10px;
            /*background-color: red;*/
            position: absolute;
            top: calc(50% - 10px / 2);
            left: calc(50% - 500px / 2);
            animation: minute 3600s linear infinite;
        }
        @keyframes minute{
            0%{transform: rotate(0);}
            100%{transform: rotate(360deg);}
        }
        #minute span{
            display: block;
            width: 290px;
            height: 6px;
            background-color: gold;
            position: relative;
            top: 2px;
            border-radius: 3px;
            z-index: 8;
        }
        #hour{
            width: 400px;
            height: 10px;
            /*background-color: red;*/
            position: absolute;
            top: calc(50% - 10px / 2);
            left: calc(50% - 400px / 2);
            animation: hour 1h linear infinite;
        }
        @keyframes hour{
            0%{transform: rotate(0);}
            100%{transform: rotate(360deg);}
        }
        #hour span{
            display: block;
            width: 230px;
            height: 9px;
            background-color: rebeccapurple;
            position: relative;
            top: 0.5px;
            border-radius: 4.5px;
            z-index: 7;
        }
    </style>
</head>
<body>
    <div id="point"></div>
    <div id="second"><span></span></div>
    <div id="minute"><span></span></div>
    <div id="hour"><span></span></div>
</body>
</html>